<!DOCTYPE html>
<html lang="en">

<head id="head">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <title>🤭</title>
    <style id="style">
        * {
            margin: 0;
            padding: 0;
        }

        /* html {
            height:1000px;
        }
        body {
            border:5px solid red;
            margin:0;
            padding:0;
        }
        #box {
            padding:100px;
            border:5px solid yellowgreen;
            position: relative;
        } */
        div {
            margin: 10px;
            /* width:100px; */
            /* height:100px; */
            /* border:5px solid red; */
            text-align: center;
            /* overflow: auto; */
        }

        #node2 {
            padding: 5px;
        }

        p {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body id="body">

    <p id="p"><b>hello</b> world!</p>




    <script id="script">

        // Node.ELEMENT_NODE   // 1:元素
        // Node.ATTRIBUTE_NODE // 2:属性
        // Node.TEXT_NODE // 3:文本
        // Node.CDATA_SECTION_NODE // 4:代表文档的CDATA部分
        // Node.ENTITY_REFERENCE_NODE // 5:代表实体引用
        // Node.ENTITY_NODE // 6:代表实体
        // Node.PROCESSING_INSTRUCTION_NODE // 7:代表处理指令
        // Node.COMMENT_NODE // 8:代表注释
        // Node.DOCUMENT_NODE // 9:代表整个文档
        // Node.DOCUMENT_TYPE_NODE // 10:为文档定义的实体提供接口
        // Node.DOCUMENT_FRAGMENT_NODE // 11:代表轻量级的Docuemnt对象，能容纳文档的某部分
        // Node.NOTATION_NODE // 12:代表DTD中声明的符号

        // console.log(document.querySelector('[name="abc"]'));
        // var node = document.getElementsByClassName('a b');

        // for(var i = 0; i < node.length; i ++) {
        //     console.log(node)
        //     var a = document.createElement('a');
        //     a.className = 'a';
        //     a.appendChild(document.createTextNode('i am new a：' + Math.floor(Math.random() * 10)));
        //     document.body.appendChild(a);
        // };

        // console.log('offset系列');
        // console.log(node1.offsetWidth, node1.offsetHeight);
        // console.log(node2.offsetWidth, node2.offsetHeight);
        // console.log('= = = = = = = = = = = = = = = = = = = = =');
        // console.log('client系列');
        // console.log(node1.clientWidth, node1.clientHeight);
        // console.log(node2.clientWidth, node2.clientHeight);
        // console.log('= = = = = = = = = = = = = = = = = = = = =');
        // console.log('scroll系列');
        // console.log(node1.scrollWidth, node1.scrollHeight);
        // console.log(node2.scrollWidth, node2.scrollHeight);
        // console.log('= = = = = = = = = = = = = = = = = = = = =');
        // console.log(document.documentElement.scrollWidth, document.documentElement.scrollHeight);
        // console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);


        // console.log(node1.getBoundingClientRect());
        // console.log(node2.getBoundingClientRect());

        // console.log(document.documentElement);
        // console.log(document.body.parentNode);
        // console.log(document.body);  

        var helloNode = p.firstChild.firstChild,
            worldNode = p.lastChild;

        var range = document.createRange();
            range.setStart(helloNode,0);
            range.setEnd(worldNode, 3);
        range.collapse(false);

        console.log(document.body.appendChild(range.cloneContents()));

        console.log(range.collapsed)

        // var span = document.createElement('span');
        // span.style.background = 'yellow'

            // console.log(document.body.appendChild(range.cloneContents()));
            // console.log(range.surroundContents(span));
            // console.log(666);






    </script>
</body>

</html>